<html>
    <head>
        <meta charset="utf-8">
        <title>时钟
        </title>
        <style>
            body{
                height: 100%;
                /*可以通过添加背景图来设置当前渐变效果*/
                /*渐变的方向以及颜色的调整*/
                background-image: radial-gradient(ellipse at 50% 70% #ccc #ddd #111);
               -moz-user-select: none;}
               #t1{
                   position: absolute;
                   margin-left: 50%;
                   top: 30%;
                   height: 350px;
                   width: 350px;
                   border-radius: 50%;
                   background-color: #eee;
                   background-image: linear-gradient(#fff 40px, #ddecf2 210px, #d3e3e9);
               }
               #t1in{
                   position: absolute;
                   box-shadow: 0px -4px 3px  3px  #ddecf2 inset;
                   height: 100%;
                   width: 100%;
                   border-radius: 50%;
                   opacity: 0.6;
                   }
                   #t2{
                       position: absolute;
                       top: 75px;
                       left: 75px;
                       width: 200px;
                       height: 200px;
                       border-radius: 50%;
                       background-color: white;
                       background-image: radial-gradient(#f9fdff,#d9eaf8);
                       box-shadow: 0px 15px 24px -3px #7a8fae;
                   }
                   #t2 i{
                       font-style: normal;
                       font-size: 20px;
                       color: red;
                   }
                   .number{
                       position: absolute;
                       width: 100%;
                       height: 100%;
                   }
                   .n12{
                       left: 50%;
                       top: 15px;
                       margin-left: -15px;
                   }
                   .n3{
                       top: 50%;
                       right: -175px;
                       margin-top: -10px;
                   }
                   .n6{
                       left: 50%;
                       bottom: -165px;
                       margin-left: -3px;
                   }
                     .n9{
                       top: 50%;
                       left: 15px;
                       margin-top: -10px;
                   }
                   #hour{
                       /*小时时针的div*/
                       position: absolute;
                       top: 50px;
                       left: 95px;
                       height: 40px;
                       width: 10px;
                       background-color: yellow;
                       border-radius: 15px;
                   }
                  
                     #second{
                       /*小时时针的div*/
                       position: absolute;
                       top: 50px;
                       left: 95px;
                       height: 80px;
                       width: 10px;
                       background-color: red;
                       border-radius: 15px;

                   }
               
                     #minute{
                       /*小时时针的div*/
                       position: absolute;
                       top: 50px;
                       left: 95px;
                       height: 50px;
                       width: 10px;
                       background-color: blue;
                       border-radius: 15px;
                   }
                 
        </style>
    </head>
    <body>
     <div id="t1">
        <div id="t1in">
           <div id="t2">
            <i class="number n12">12</i>
            <i class="number n3">3</i>
            <i class="number n6">6</i>
            <i class="number n9">9</i>
           <div id="hour"> 
              <div di="hourp"></div>
           </div>
           <div id="minute">
               <div di="minutep"></div> </div>
           <div id="second"> 
               <div di="secondp"></div>
           </div>
           <div id="point"> </div>
           
           </div>
        </div>
         </div>  
       <script src="shizhong.js"></script>
    </body>
</html>